<template>
    <div>
        <div id="image-container"></div>
        <div class="speaker ">
            <button class="contentImgButton" @click="handleSpeaker()">
                <img v-if="isPlay" class="content-img" src="../../assets/h5/contentImg.gif" alt="" />
                <img v-else class="content-img" src="../../assets/h5/broadcast.png" alt="" />
            </button>
        </div>
        <div class="flex">
            文字字号：
            <div id="slider-container">
                <!-- <input type="range" id="slider" min="37" max="65" value="45"> -->
                <div class="button-container" @click="valueDec()">
                    <img class="buttonImg" src="../../assets/h5/缩小.png" alt="" srcset="">
                    <!-- 缩小 -->
                </div>
                <div class="fontSizeValue" id="fontSizeValue">{{ fontSizeValue }}</div>
                <div class="button-container" @click="valueAdd()">
                    <img class="buttonImg" src="../../assets/h5/放大.png" alt="" srcset="">
                    <!-- 放大 -->
                </div>
            </div>
        </div>
        <div style="display: none;">
            <button class="button" id="controll_tts">立即合成</button>
            <button class="button" id="download_pcm">下载pcm</button>
            <button class="button" id="download_wav">下载wav</button>
        </div>

        <div class="page">
            <div class="body">
                <div class="title" :style="{ fontSize: titleSize + 'px' }">{{ title }}</div>
                <div class="title1" :style="{ fontSize: titleSize1 + 'px' }">请仔细阅读说明书并在医师指导下使用</div>
                <div class="btn" id="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 活血化瘀,通脉活络</div>
                <div class="content" v-for="(item, i) in datlist">
                    <div class="content-flex">
                        <div class="content-title" :style="{ fontSize: contentTitle + 'px' }">
                            【{{ item.title }}】</div>
                        <button class="contentImgButton" @click="audition(item.voiceUrl, i + 1)">
                            <img v-if="item.isPlay" class="content-img" src="../../assets/h5/contentImg.gif" alt="" />
                            <img v-else class="content-img" src="../../assets/h5/broadcast.png" alt="" />
                        </button>
                    </div>
                    <div class="content-info" :style="{ fontSize: contentInfo + 'px' }">
                        <div v-html="item.content"></div>
                    </div>
                </div>

                <!-- <div v-html="htmlContent"></div> -->
            </div>
            <audio id="audioPlayer" controls style="display:none" @ended="onAudioEnded"></audio>

            <textarea id="textarea" style="display: none;" placeholder="请输入您要合成的文本">
        春江潮水连海平，海上明月共潮生。
    </textarea>
            <div style="display:none">
                <div>语速([0-100])：<input class="input" id="speed" value="50" /></div>
                <div>音量([0-100])：<input class="input" id="volume" value="50" /></div>
                <div>音高([0-100])：<input class="input" id="pitch" value="50" /></div>
                <div>发音人：<input class="input" id="vcn" value="xiaoyan" /></div>
                <!-- x4_lingxiaolu_en -->
                <div>小语种(泰语)：<input style="width: 40px;height: 40px;" id="tte" type="checkbox" /></div>
                <div>注意：发音人与语种会关联，小语种需要开通指定发音人</div>
            </div>
            <div id="result" style="display:none"></div>
        </div>
        <div id="result"></div>
    </div>
</template>
<script>
import { meidicineInfo } from "@/api/h5";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import broadcast from "@/assets/h5/broadcast.png";
import contentImg from "@/assets/h5/contentImg.gif";
export default {
    name: "Login",
    data() {
        return {
            speckConent: '',
            voiceType: 'xiaoyu',
            allBodyTextUrl: '',
            datlist: [],
            index: 0,
            fontSizeValue: 45,
            fontSizeStep: 2,//定义字号变化的步长
            htmlContent: '',
            title: '',
            contentTitle: '',
            contentInfo: '',
            titleSize:'',
            titleSize1:'',
            isPlay: false,

        };
    },
    created() {
        var hrefNum = this.$route.query.id
        this.getContent(hrefNum)
    },
    mounted() {
        // 监听窗口大小变化事件
        this.handleResize();
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 在组件销毁前移除事件监听器
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {
        handleResize() {
            const screenWidth = window.innerWidth;
            if (screenWidth < 768) {
                this.contentTitle = 38
                this.contentInfo = 24
                this.titleSize = 35
                this.titleSize1 = 28
            } else if (screenWidth >= 768 && screenWidth <= 1024) { // 当屏幕宽度小于等于800px时，字体大小为10px
                this.contentTitle = 48
                this.contentInfo = 34
                this.titleSize = 65
                this.titleSize1 = 35
            } else {
                this.contentTitle = 58
                this.contentInfo = 44
                this.titleSize = 70
                this.titleSize1 = 44
            }
        },
        //增加
        valueAdd() {
            this.titleSize = parseInt(Number(this.titleSize) + this.fontSizeStep)
            this.titleSize1 = parseInt(Number(this.titleSize1) + this.fontSizeStep)
           
            this.contentTitle = parseInt(Number(this.contentTitle) + this.fontSizeStep);
            this.contentInfo = parseInt(Number(this.contentInfo) + this.fontSizeStep)

            this.fontSizeValue = parseInt(Number(this.fontSizeValue) + this.fontSizeStep);
        },
        //减少
        valueDec() {
            this.titleSize = parseInt(Number(this.titleSize)- this.fontSizeStep)
            this.titleSize1 = this.titleSize1 - this.fontSizeStep
            this.contentTitle = parseInt(Number(this.contentTitle) - this.fontSizeStep);
            this.contentInfo = parseInt(Number(this.contentInfo) - this.fontSizeStep)
            this.fontSizeValue = parseInt(Number(this.fontSizeValue) - this.fontSizeStep);
        },
        //获取页面所有文字
        getTextByClassName(className) {
            const elements = document.getElementsByClassName(className);
            let allText = '';

            for (let i = 0; i < elements.length; i++) {
                let elementText = elements[i].textContent;
                allText += elementText + ' ';
            }

            allText = allText.trim();
            return allText;
        },
        handleSpeak1(titleData, msgData) {
            document.getElementById("textarea").value = titleData + ',' + msgData;
            //alert();
            document.getElementById('controll_tts').click();
        },
        handleSpeak(titleData, msg, i) {
            var perParam = 0;
            if (voiceType == "xiaoyu") {
                perParam = 1;
            }
            // console.log(i,datlist);
            let withoutTag = ""
            if (i || i == 0) {
                titleData = datlist[i].title
                withoutTag = datlist[i].content
            }
            if (/<[^>]+>/.test(withoutTag)) {
                msg = withoutTag.replace(/<[^>]+>/g, '')
            } else {
                msg = withoutTag
            }
            fetch("https://tsn.baidu.com/text2audio?tok=" + "24.ee8ce38fc0723287ab1b28f1a29e8b3a.2592000.1736909688.282335-116670895" +
                "&tex=" + titleData + "," + msg +
                "&cuid=MQtX1eobGiuaFK4rbomQRDs8jHcvnms1&ctp=1&lan=zh&spd=5&pit=5&vol=5" +
                "&per=" + perParam +
                "&aue=3")
                .then(response => response.blob()) // 将响应转换为Blob
                .then(blob => {
                    // 创建一个URL表示此blob对象
                    const blobUrl = URL.createObjectURL(blob);
                    // 设置audio元素的src属性为新创建的URL
                    document.getElementById('audioPlayer').src = blobUrl;
                    // 播放音频
                    document.getElementById('audioPlayer').play();
                });
        },
        handleSpeaker() {
            this.audition(this.allBodyTextUrl, 0);
        },
        getContent(hrefNum) {
            meidicineInfo(hrefNum).then(res => {
                console.log(res);
                var data = res.data
                console.log(data, 'data');
                data.medicineDetails.map(el => {
                    el.isPlay = false
                })
                this.datlist = data.medicineDetails
                this.voiceType = data.voiceType;
                this.allBodyTextUrl = data.voiceUrl;
                var btn = document.getElementById('btn');

                if (data.colorType == 1) {
                    btn.classList.add('btnImg');
                } else {
                    btn.classList.add('btnColor');
                }

                //logo
                const images = data.logo.split(",");
                images.forEach(imageUrl => {
                    const img = document.createElement('img');
                    img.src = 'https://slhsms.kpc.com.cn/prod-api' + imageUrl; // 设置img元素的src属性为图片的URL
                    img.alt = ''; // 设置img元素的alt属性（可以根据需要为每个图片设置不同的alt）
                    img.style.margin = '10px'; // 可选：为图片添加一些间距
                    img.style.width = '120px'
                    // 将img元素插入到页面上的指定容器中
                    const imageContainer = document.getElementById('image-container');
                    imageContainer.appendChild(img);
                });

                this.title = data.medicineCnName;

            });
        },
        audition(params, i) {
            if (params.indexOf('mp3') == -1) {
                alert('暂无语音文件,请先生成语音')
                return
            } else {
                var voiceUrl = 'https://slhsms.kpc.com.cn/prod-api/profile/upload/' + params;
                this.pauseAudio(voiceUrl, i)
            }
        },
        removeBrTags(text) {
            return text.replace(/<br\s*[\/]?>/gi, '') || text;
        },
        // 暂停
        pauseAudio(voiceUrl, i) {

            console.log(i, 'iiii');
            console.log(this.index, 'index');

            var audioPlayer = document.getElementById('audioPlayer');
            if (i == this.index) {
                console.log(111111);
                if (audioPlayer.paused || audioPlayer.ended) {
                    this.datlist.map(el => {
                        el.isPlay = false
                    })
                    if (i == 0) {
                        this.isPlay = true
                    } else {
                        this.datlist[i - 1].isPlay = true
                    }
                    console.log(222222);
                    document.getElementById('audioPlayer').src = voiceUrl;
                    audioPlayer.play();
                } else {
                    console.log(333333);
                    if (i == 0) {
                        this.isPlay = false
                    } else {
                        this.datlist[i - 1].isPlay = false
                    }
                    audioPlayer.pause();
                }
            } else {
                console.log(44444);
                this.datlist.map(el => {
                    el.isPlay = false
                })
                this.isPlay = false
                if (i == 0) {
                    this.isPlay = true
                } else {
                    this.datlist[i - 1].isPlay = true
                }
                this.index = i
                document.getElementById('audioPlayer').src = voiceUrl;
                audioPlayer.play();
            }
        },
        onAudioEnded() {
            this.datlist.map(el => {
                el.isPlay = false
            })
            this.isPlay = false
        },

    }
};
</script>
<style>
p {
    margin: 0;
}

#image-container {
    display: flex;
    align-items: center;
}

.speaker {
    width: 95%;
    display: flex;
    justify-content: flex-end;

}

/* #textarea {
  width: calc(100vw - 60px);
  font-size: 25px;
  padding: 0;
  margin: 10px 0;
  height: 800px;
} */
.input {
    width: 50%;
    height: 45px;
    font-size: 25px;
}

.button {
    background: none;
    font-size: 45px;
    margin-top: 20px;
}

.page {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 20px 200px 20px;
}

.body {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.btnColor {
    background: #eef0f1;
    color: #000;

}

.btnImg {
    background: url('../../assets/h5/不带字.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;
}

.content {
    width: 100%;
    padding: 0 30px;
    margin-top: 30px;
}

.content-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#slider-container {
    width: 65%;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#slider {
    width: 100%;
    margin-top: 20px;
}



@media (max-width: 767.98px) {
    .contentImgButton {
        width: 40px;
        height: 40px;
        overflow: hidden;
    }

    .page {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 10px 10px 190px 10px;
    }

    .title {
        width: 100%;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }

    .title1 {
        font-size: 25px;
        width: 50%;
        text-align: center;
        font-weight: 600;
        margin-top: 20px;
    }

    .btn {
        width: 100%;
        height: 50px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-size: 25px;
        margin-top: 30px;
        font-weight: 400;
        align-items: center;
    }

    .content-img {
        width: 25px;
        height: 25px;
    }

    .content-title {
        font-weight: 500;
        font-size: 38px;
        margin: 10px 0;
    }

    .content-info {
        font-size: 24px;
        margin: 10px 0;
        color: #7e7d7d;
    }

    .content-info img {
        width: 155px;
        height: 155px;
    }

    .flex {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22px;
        background: #fff;
        height: 120px;
        box-shadow: 0 0 20px 0px #d5d3d3;
    }

    .fontSizeValue {
        font-weight: 500;
        font-size: 30px;
    }

    .buttonImg {
        width: 20px;
        height: 20px;
    }

    .button-container {
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 3px solid #2c2c2c;
        padding: 10px 17px;
    }

}

@media (min-width: 768px) and (max-width: 991.98px) {
    .contentImgButton {
        width: 60px;
        height: 60px;
        overflow: hidden;
    }

    .title {
        width: 100%;
        text-align: center;
        font-size: 50px;
        font-weight: bold;
    }

    .title1 {
        font-size: 35px;
        width: 50%;
        text-align: center;
        font-weight: 600;
        margin-top: 20px;
    }

    .btn {
        width: 100%;
        height: 70px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-size: 35px;
        margin-top: 30px;
        font-weight: 400;
        align-items: center;
    }

    .page {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px 20px 200px 20px;
    }

    .content-img {
        width: 45px;
        height: 45px;
    }

    .content-title {
        font-weight: 500;
        font-size: 58px;
        margin: 10px 0;
    }

    .content-info {
        font-size: 44px;
        margin: 10px 0;
        color: #7e7d7d;
    }

    .content-info img {
        width: 185px;
        height: 185px;
    }

    .flex {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 42px;
        background: #fff;
        height: 180px;
        box-shadow: 0 0 20px 0px #d5d3d3;
    }

    .fontSizeValue {
        font-weight: 500;
        font-size: 50px;
    }

    .buttonImg {
        width: 80px;
        height: 80px;
    }

    .button-container {
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 4px solid #2c2c2c;
        padding: 15px 25px;
    }

}

@media (min-width: 992px) {
    .contentImgButton {
        width: 80px;
        height: 80px;
        overflow: hidden;
    }

    .title {
        width: 100%;
        text-align: center;
        font-size: 70px;
        font-weight: bold;
    }

    .title1 {
        font-size: 45px;
        width: 50%;
        text-align: center;
        font-weight: 600;
        margin-top: 20px;
    }

    .btn {
        width: 100%;
        height: 90px;
        border-radius: 8px;
        display: flex;
        justify-content: center;
        font-size: 45px;
        margin-top: 30px;
        font-weight: 400;
        align-items: center;
    }

    .content-img {
        width: 55px;
        height: 55px;
    }

    .page {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 20px 20px 200px 20px;
    }

    .content-title {
        font-weight: 500;
        font-size: 58px;
        margin: 10px 0;
    }

    .content-info {
        font-size: 44px;
        margin: 10px 0;
        color: #7e7d7d;
    }

    .flex {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 42px;
        background: #fff;
        height: 180px;
        box-shadow: 0 0 20px 0px #d5d3d3;
    }

    .fontSizeValue {
        font-weight: 500;
        font-size: 50px;
    }

    .buttonImg {
        width: 80px;
        height: 80px;
    }

    .button-container {
        font-weight: 500;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 5px solid #2c2c2c;
        padding: 15px 35px;
    }

}


#value {
    font-size: 24px;
    margin-top: 20px;

}
</style>